<template>
  <div class="warning-detail">
    <!-- Breadcrumb Navigation -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/warning' }"
        >告警中心</el-breadcrumb-item
      >
      <el-breadcrumb-item>设备详情</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- Action Header -->
    <div class="action-header">
      <div class="action-buttons">
        <el-button v-for="btn in actionButtons" :key="btn.label" type="primary">
          {{ btn.label }}
        </el-button>
      </div>
      <div class="auto-refresh">
        <span class="text">自动更新：</span>
        <el-select v-model="refreshInterval" style="width: 114px">
          <el-option
            v-for="item in refreshOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-time-picker
          v-model="currentTime"
          arrow-control
          placeholder="选择时间"
        />
        <el-button type="primary" :icon="RefreshLeft" />
      </div>
    </div>

    <!-- Main Content -->
    <div class="main-content">
      <!-- Summary Cards -->
      <div class="summary-grid">
        <div class="basic-stats">
          <stat-card
            v-for="stat in basicStats"
            :key="stat.label"
            :value="stat.value"
            :label="stat.label"
          />
        </div>
        <div class="metric-stats">
          <metric-card
            v-for="metric in metricStats"
            :key="metric.label"
            :value="metric.value"
            :label="metric.label"
            :icon="metric.icon"
            :color="metric.color"
          />
        </div>
      </div>

      <!-- Status Panels -->
      <div class="status-grid">
        <status-panel
          v-for="panel in statusPanels"
          :key="panel.title"
          :title="panel.title"
          :stats="panel.stats"
          :icon="panel.icon"
        />
      </div>

      <!-- Real-time Metrics -->
      <RealtimeMetrics
        :timestamp="currentTimestamp"
        :metrics="realtimeMetrics"
        @refresh="handleRefresh"
      />

      <!-- Chart Sections -->
      <div class="chart-grid">
        <chart-container
          v-for="chart in firstChartGroup"
          :key="chart.title"
          :title="chart.title"
          :time-range="chart.timeRange"
          :chart-id="chart.id"
          @time-range-change="chart.timeRange = $event"
        />
      </div>
      <div class="chart-grid">
        <chart-container
          v-for="chart in secondChartGroup"
          :key="chart.title"
          :title="chart.title"
          :time-range="chart.timeRange"
          :chart-id="chart.id"
          :chart-type="chart.type"
          @time-range-change="chart.timeRange = $event"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { RefreshLeft } from "@element-plus/icons-vue";
import { ref, onMounted, computed } from "vue";
import * as echarts from "echarts";

// Components
import StatCard from "./components/StatCard.vue";
import MetricCard from "./components/MetricCard.vue";
import StatusPanel from "./components/StatusPanel.vue";
import RealtimeMetrics from "./components/RealtimeMetrics.vue";
import ChartContainer from "./components/ChartContainer.vue";

// Constants
const actionButtons = [
  { label: "SSH启动" },
  { label: "文件管理" },
  { label: "设备配置" },
  { label: "端口信息" },
];

const refreshOptions = [
  { label: "5分钟", value: "5" },
  { label: "10分钟", value: "10" },
  { label: "15分钟", value: "15" },
  { label: "30分钟", value: "30" },
];

const basicStats = [
  { value: "0", label: "配置设备" },
  { value: "0", label: "离线设备" },
  { value: "0", label: "文件总量" },
  { value: "0", label: "接口总量" },
];

const metricStats = [
  { value: "5.00%", label: "设备平均CPU利用率", icon: "1.svg", color: "blue" },
  {
    value: "5.00%",
    label: "设备平均内存利用率",
    icon: "2.svg",
    color: "yellow",
  },
  { value: "5.00%", label: "网口丢包", icon: "3.svg", color: "green" },
  { value: "5.00%", label: "服务器延迟", icon: "4.svg", color: "teal" },
];

const statusPanels = [
  {
    title: "网口运行状态",
    icon: "f1",
    stats: [
      { value: "6", label: "正常" },
      { value: "24", label: "异常" },
      { value: "0", label: "异常" },
      { value: "0", label: "异常" },
    ],
  },
  {
    title: "电源运行状态",
    icon: "f2",

    stats: [
      { value: "6", label: "正常" },
      { value: "24", label: "异常" },
      { value: "0", label: "异常" },
    ],
  },
  {
    title: "风扇运行状态",
    icon: "f3",
    stats: [
      { value: "6", label: "正常" },
      { value: "24", label: "异常" },
      { value: "0", label: "异常" },
    ],
  },
];

const realtimeMetrics = [
  { value: "5.00%", label: "设备平均CPU利用率", color: "blue" },
  { value: "5.00%", label: "设备平均内存利用率", color: "orange" },
  { value: "8ms", label: "网口延迟", color: "green" },
  { value: "57.00%", label: "端口吞吐量", color: "rate" },
];

const firstChartGroup = [
  {
    title: "设备平均CPU利用率",
    timeRange: ref("1h"),
    id: "cpuChart",
  },
  {
    title: "设备平均内存利用率",
    timeRange: ref("1h"),
    id: "memoryChart",
  },
  {
    title: "响应时间",
    timeRange: ref("1h"),
    id: "responseTimeChart",
  },
];

const secondChartGroup = [
  { title: "当日不可达比率", timeRange: ref("1h"), id: "unreachableChart" },
  {
    title: "日平均速度Top5",
    timeRange: ref("1h"),
    id: "speedChart",
    type: "bar",
  },
  {
    title: "配置文件变更",
    timeRange: ref("1h"),
    id: "configChangeChart",
    type: "gauge",
  },
];

// Reactive state
const refreshInterval = ref("5");
const currentTime = ref("");
const currentTimestamp = ref("2024-09-23 11:26:06");

// Methods
const handleRefresh = () => {
  console.log("Refreshing data...");
  // Add actual refresh logic here
};

// Initialize charts
onMounted(() => {
  // This would be moved to the ChartContainer component
});
</script>

<style lang="scss" scoped>
.warning-detail {
  padding: 16px;
}

.action-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0;
  flex-wrap: wrap;
  gap: 16px;

  .action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .auto-refresh {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;

    .text {
      font-size: 14px;
      color: #333;
    }

    .el-select {
      width: 114px;
    }
  }
}

.summary-grid {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;

  .basic-stats {
    display: flex;
    width: 500px;
    gap: 16px;
    background-color: #f9f9f9;
    padding: 16px;
    border-radius: 4px;
  }

  .metric-stats {
    display: flex;
    flex: 2;
    min-width: 300px;
    gap: 16px;
    border: 1px solid #dfe0e1;
    padding: 16px 26px;
    border-radius: 4px;
  }
}
.status-grid {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  .status-panel {
    flex: 1;
    height: 156px;
    box-sizing: border-box;
  }
}

.chart-grid {
  display: flex;
  gap: 0 16px;
  margin: 16px 0;
  .chart-container {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .action-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .summary-grid {
    flex-direction: column;
  }

  .basic-stats,
  .metric-stats {
    flex-direction: column;
  }
}
</style>